<template>
    <div class="organization-tree-container">
        <div class="tree">
            <div class="tool-bar">
                <el-input
                    placeholder="搜索成员名字"
                    size="small"
                    v-model="filterText"
                >
                </el-input>
            </div>
            <div class="content" v-loading="treeData.length===0">
                <div class="content-container">
                    <el-tree
                        class="filter-tree"
                        :data="treeData"
                        show-checkbox
                        default-expand-all
                        node-key="id"
                        :props="defaultProps"
                        :filter-node-method="filterNode"
                    
                        @check="handleNodeClick"
                        ref="tree"
                        empty-text="暂无组织架构数据"
                    >
                    </el-tree>
                </div>
            </div>
        </div>
        <div class="checkeds">
            <div class="content">
                <div class="content-container" v-if="checkedData.length>0">
                    <template v-for="item of checkedData">
                        <div class="tree-top-level" :key="item.app_code" v-if="item.children.length>0">
                                <div class="row">
                                    <label>{{ item.name }}：</label>
                                </div>
                                <el-tag
                                    size="small"
                                    closable
                                    v-for="member in item.children"
                                    :key="member.id"
                                    @close="cancelCheck(member)"
                                    >
                                    {{member.name}}
                                </el-tag>
                        </div>
                    </template>
                </div>
                <div v-else class="empty-row">
                    您未选择成员，请在左侧勾选成员
                </div>
            </div>

        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            filterText: "",
            treeData: [],
            defaultProps: {
                children: "children",
                label: "name",
            },
            checkedData: [],
            checkedIds: "",
        };
    },
    created() {
        this.getData();
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        },
    },
    computed: {},
    methods: {
        // 获取组织架构数据
        getData() {
            let code = sessionStorage.getItem("CheckSchoolAppCode");
            let params = {
                user_name: this.filterText,
                app_code: code ? code : "00000000000000000000000000000000",
            }
            let success = (res) => {
                this.treeData = this.searchTree(res.data);
            };
            this.$ajax.get('api/group/group_organization_user',{params,func:{success:success}})
        },
        // 输入框筛选
        filterNode(value, data) {
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
        },
        // el-tree 勾选
        handleNodeClick() {

            this.checkedData = [];
            const cNodes = this.$refs.tree.getCheckedNodes();
            const hkeys = this.$refs.tree.getHalfCheckedKeys();
        
            // 获取勾选的成员数据
            let checkedNodes = [];
            cNodes.map(item=>{
                if(item.hasOwnProperty('user_number')){
                    checkedNodes.push(item.id);
                }
            })
            this.checkedIds = checkedNodes.join(',');//已经勾选到的成员id字符串，中间,号隔开
            //获取右侧 已选 列表数据：
            let length = this.treeData.length;
            for (let i = 0; i < length; i++) {
                let obj = {};
                const item = this.treeData[i];
                obj.app_code = item.app_code;
                obj.name = item.name;
                obj.children = [];
                for (let j = 0; j < cNodes.length; j++) {
                    const item1 = cNodes[j];
                    if(item.app_code === item1.user_app_code){
                        obj.children.push(item1);
                    }
                }
                this.checkedData.push(obj);
            }
            this.checkedData = this.checkedData.filter(item=>{
               return item.children.length>0
            })
            /// -----------------------------------------------------------------------
            for(let i = 0 ;i < this.checkedData[0].children.length ; i++) {             
                for (let j = i+1 ;j < this.checkedData[0].children.length;j++) {
                    if(this.checkedData[0].children[i].id === this.checkedData[0].children[j].id) {
                        this.checkedData[0].children.splice(j,1)
                        j--
                    }
                }
            }
            /// -----------------------------------------------------------------------
        },
        // 递归遍历
        searchTree(data) {
            // console.log(data, 12345)
            const length = data.length;
            for (let i = 0; i < length; i++) {
                let item =data[i];
                if(!item.hasOwnProperty('user_number')){
                    item['disabled']=true;
                }
                if(!is_empty(item.children)){
                    this.searchTree(item.children);
                }
            }
            // console.log(data)
            return data;
        },
        // 已选->tags删除选中
        cancelCheck(item){
            // 删除已选中的成员id字符串集合中对应的id值：
            let idArr = this.checkedIds.split(',').map(Number);
            idArr = idArr.filter(id=>id!=item.id);
            this.checkedIds = idArr.join(',');

            // el-tree 通过key设置 选中状态
            this.setChecked(idArr);
            // 删除已选中对应数据：
            let length = this.checkedData.length;
            for (let i = 0; i < length; i++) {
                const temp = this.checkedData[i].children;
                for (let j = 0; j < temp.length; j++) {
                    if(temp[j].id===item.id){
                        temp.splice(j,1)
                    }
                }
            }
  
        },
        setChecked(ids){
            this.$refs.tree.setCheckedKeys(ids);
        }
    },
};
</script>
<style lang="scss">
.organization-tree-container {
    display: flex;
    min-height: 400px;
    .tool-bar {
        padding-bottom: 20px;
    }
    .content{
        height: 500px;
        border: 1px solid #DCDFE6;
        border-radius: 2px;
        overflow: scroll;
    }
    .tree{
        width: 45%;
        // .el-tree-node__expand-icon.is-leaf{
        //     color: #C0C4CC;
        //     &::before {
        //         content: "\e790";
        //     }
        // }
        .el-checkbox.is-disabled{
            display: none;
        }
        .content-container{
            padding: 10px;
        }
    }
    .checkeds{
        box-sizing: border-box;
        width: 55%;
        padding: 52px 0 0 24px;
        .content-container{
            padding: 16px;
        }
    }

    .empty-row{
        height: 100%;
        font-size: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #C0C4CC;
        background-color: #fff;
    }
    .tree-top-level{
        padding-bottom: 20px;
        .row{
            padding-bottom: 5px;
        }
        .el-tag{
            margin: 5px 10px 5px 0;
        }
    }
}
.el-tree__empty-block {
    height: 470px;
    .el-tree__empty-text{
        font-size: 12px;
        color: #C0C4CC;
    }
}
</style>